import MainContainerCustom from '@/components/MainContainerCustom';
import { View } from '@tarojs/components';
import './index.less';
import dayjs from 'dayjs';
import { useEffect, useMemo, useRef, useState } from 'react';

import { waitTime } from '@vh-mobile/pro-utils';
import type {
  CImChatCustomMessageType,
  CImChatCustomResType,
  DataType,
  ImRefRefObjType,
} from '@vh-mobile/pro-components/lib/c-im-chat-custom/types';
import { CImChatCustom } from '@vh-mobile/pro-components';

export default function DemoImChat() {
  const imRef = useRef<ImRefRefObjType>();
  const [data] = useState<DataType[]>([
    {
      id: 1,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '融云产品经理',
      desc: '提供文字、图片、表情及语音片段提供文字、图片、表情及语音片段',
      date: dayjs().subtract(60, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 2,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-ca9b750a4ed5b87d9bc8c553b44e615e_720w.webp',
      nickname: 'IOS8 Design',
      desc: '多年专注于移动互联网即时通讯',
      date: dayjs().subtract(50, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 3,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://pic2.zhimg.com/80/v2-451a2400fd7bcef953d887c3daad6489_720w.webp',
      nickname: '开发者群开发者群开发者群开发者群',
      desc: '郝云:Okay',
      date: dayjs().subtract(40, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 4,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      nickname: '融云客服',
      desc: '[图片]',
      date: dayjs().subtract(30, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 5,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '融云产品经理',
      desc: '提供文字、图片、表情及语音片段提供文字、图片、表情及语音片段',
      date: dayjs().subtract(20, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 6,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-ca9b750a4ed5b87d9bc8c553b44e615e_720w.webp',
      nickname: 'IOS8 Design',
      desc: '多年专注于移动互联网即时通讯',
      date: dayjs().subtract(9, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 7,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://pic2.zhimg.com/80/v2-451a2400fd7bcef953d887c3daad6489_720w.webp',
      nickname: '开发者群开发者群开发者群开发者群',
      desc: '郝云:Okay',
      date: dayjs().subtract(8, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 8,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      nickname: '融云客服',
      desc: '[图片]',
      date: dayjs().subtract(5, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 9,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '融云产品经理',
      desc: '提供文字、图片、表情及语音片段提供文字、图片、表情及语音片段',
      date: dayjs().subtract(3, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 10,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-ca9b750a4ed5b87d9bc8c553b44e615e_720w.webp',
      nickname: 'IOS8 Design',
      desc: '多年专注于移动互联网即时通讯',
      date: dayjs().subtract(1, 'd').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 11,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://pic2.zhimg.com/80/v2-451a2400fd7bcef953d887c3daad6489_720w.webp',
      nickname: '开发者群开发者群开发者群开发者群',
      desc: '郝云:Okay',
      date: dayjs().subtract(10, 'h').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 12,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      nickname: '融云客服',
      desc: '[图片]',
      date: dayjs().subtract(5, 'h').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 13,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '融云产品经理',
      desc: '提供文字、图片、表情及语音片段提供文字、图片、表情及语音片段',
      date: dayjs().subtract(1, 'h').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 14,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-ca9b750a4ed5b87d9bc8c553b44e615e_720w.webp',
      nickname: 'IOS8 Design',
      desc: '多年专注于移动互联网即时通讯',
      date: dayjs().subtract(30, 'm').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 15,
      isSelf: true,
      messageType: 'text',
      headimg: 'https://pic2.zhimg.com/80/v2-451a2400fd7bcef953d887c3daad6489_720w.webp',
      nickname: '开发者群开发者群开发者群开发者群',
      desc: '郝云:Okay',
      date: dayjs().subtract(15, 'm').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      id: 16,
      isSelf: false,
      messageType: 'text',
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      nickname: '融云客服',
      desc: '[图片]',
      date: dayjs().subtract(5, 'm').format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      date: dayjs().subtract(4, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'image',
      messageStatus: 'error',
      nickname: '周大仙',
      image: {
        url: 'https://pic4.zhimg.com/80/v2-cd31abeffd126b00bfa4964af0ec1753_720w.webp',
        size: 1,
      },
    },
    {
      date: dayjs().subtract(3, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: false,
      messageType: 'image',
      nickname: '周大仙11',
      image: {
        url: 'https://pic4.zhimg.com/v2-cd3a19cb95906ae13e4da6bb04b9fa3f_b.jpg',
        size: 1,
      },
    },
    {
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'image',
      nickname: '周大仙11222',
      image: {
        url: 'https://pic2.zhimg.com/v2-48263fb6b6c42d4a26e7e437ae444c71_b.jpg',
        size: 1,
      },
    },
    {
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'video',
      nickname: '周大仙video12',
      video: {
        url: 'http://sp.720ku.net//upload/video/2023-02-28/e7923459-286f-44c7-bee4-b21c20f3cf71.mp4',
        size: 1,
      },
    },
    {
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: false,
      messageType: 'voice',
      nickname: '周大仙video12',
      voice: {
        url: 'https://lh-sycdn.kuwo.cn/ec42fdffe622c67a17e73f1b432d6b44/66c42aac/resource/n3/9/67/2747584519.mp3',
        size: 300,
        duration: 3,
      },
    },
    {
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: false,
      messageType: 'voice',
      nickname: '周大仙video12',
      voice: {
        url: 'https://lh-sycdn.kuwo.cn/ec42fdffe622c67a17e73f1b432d6b44/66c42aac/resource/n3/9/67/2747584519.mp3',
        size: 600,
        duration: 60,
      },
    },
    {
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: true,
      messageType: 'voice',
      nickname: '周大仙video12',
      voice: {
        url: 'https://lh-sycdn.kuwo.cn/ec42fdffe622c67a17e73f1b432d6b44/66c42aac/resource/n3/9/67/2747584519.mp3',
        size: 1000,
        duration: 30,
      },
    },
    {
      date: dayjs().subtract(1, 'm').format('YYYY-MM-DD HH:mm:ss'),
      headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
      isSelf: false,
      messageType: 'video',
      nickname: '周大仙video22',
      video: {
        url: 'http://sp.720ku.net//upload/video/2024-05-07/f117867c-562d-40bd-9f4a-f5cc306c994d.mp4',
        size: 1,
      },
    },
  ]);

  const onSendMessage = (d: DataType) => {
    // await apiFormatFn()
    // .... 处理业务逻辑
    setTimeout(() => {
      imRef?.current?.setMessageStatus(d, 'success');
    }, 2000);
  };

  useEffect(() => {
    setInterval(() => {
      if (imRef?.current) {
        imRef?.current.receiveMessage({
          id: 1,
          isSelf: true,
          messageType: 'text',
          headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
          nickname: '自动消息',
          desc: '收到自动拉20秒一次',
          date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        });
      }
    }, 20000);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [imRef?.current]);

  const uploaderRequest = async (
    type: CImChatCustomMessageType,
    file: any,
  ): Promise<CImChatCustomResType> => {
    // await apiFormatFn()

    if (type === 'image') {
      return {
        size: file.size,
        url: file.url,
      };
    } else if (type === 'video') {
      return {
        poster: file.thumb,
        size: file.size,
        duration: file.duration,
        url: file.url,
      };
    }

    return {
      poster: undefined,
      size: 1000,
      url: 'https://pic4.zhimg.com/80/v2-cd31abeffd126b00bfa4964af0ec1753_720w.webp',
    };
  };

  const onHistoryMessage = async () => {
    await waitTime(3000);

    const hdata: DataType[] = [
      {
        isSelf: true,
        messageType: 'text',
        headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
        nickname: '历史消息',
        desc: '滑动到最顶部加载历史消息',
        date: dayjs().subtract(30, 'm').format('YYYY-MM-DD HH:mm:ss'),
      },
    ];
    // // 异步插入
    // if (imRef?.current) {
    //   imRef?.current.addHistoryMessage([
    //     {
    //       isSelf: true,
    //       messageType: 'text',
    //       headimg: 'https://img.yzcdn.cn/vant/cat.jpeg',
    //       nickname: '历史消息',
    //       desc: '滑动到最顶部加载历史消息',
    //       date: dayjs().subtract(30, 'm').format('YYYY-MM-DD HH:mm:ss'),
    //     },
    //   ]);
    // }
    // 同步返回
    return hdata;
  };

  const CImChatCustomMemo = useMemo(() => {
    return (
      <CImChatCustom
        // showNickname
        customMessageNode={(d: DataType, direction_, dom: React.ReactNode) => {
          if (d.messageType === 'custom') {
            console.log('===================');
            console.log(d);
            console.log('===================');
            return (
              <>
                <View className="send-house">
                  <View className="house">房源卡片</View>
                  <View className="label">{d.custom.houseName}</View>
                </View>
              </>
            );
          }
          return dom;
        }}
        uploaderRequest={uploaderRequest}
        imRef={imRef}
        userInfo={{
          nickname: '周大仙',
          headimg: 'https://pic3.zhimg.com/80/v2-f97259929a802be7f72b0f1f2d12c956_720w.webp',
        }}
        onSendMessage={onSendMessage}
        onHistoryMessage={onHistoryMessage}
        data={data}
        customToolOption={[
          <>
            <View
              className="send-house"
              onClick={() => {
                if (imRef?.current) {
                  imRef?.current.sendMessage('custom', undefined, {
                    houseName: '房源1',
                  });
                }
              }}
            >
              <View className="house">发送房源</View>
              <View className="label">房源</View>
            </View>
          </>,
        ]}
      />
    );
  }, [data]);

  return (
    <MainContainerCustom>
      <View className="im-chat">{CImChatCustomMemo}</View>
    </MainContainerCustom>
  );
}
